mjml-section

mj-section

Sections are intended to be used as rows within your email. They will be used to structure the layout.

<mjml>
  <mj-body>
    <mj-section full-width="full-width" background-color="red">
      <!-- Your columns go here -->
    </mj-section>
  </mj-body>
</mjml>

The full-width property will be used to manage the background width. By default, it will be 600px. With the full-width property on, it will be changed to 100%.

Inverting the order in which columns display: set the `direction` attribute to `rtl` to change the order in which columns display on desktop. Because MJML is mobile-first, structure the columns in the order you want them to stack on mobile, and use `direction` to change the order they display on desktop. Sections cannot nest in sections. Columns can nest in sections; all content must be in a column.

attribute	unit	description	default value
background-color	color	section color	n/a
background-position	percent / 'left','top',... (2 values max)	css background position (see outlook limitations below)	top center
background-position-x	percent / keyword	css background position x	none
background-position-y	percent / keyword	css background position y	none
background-repeat	string	css background repeat	repeat
background-size	px/percent/'cover'/'contain'	css background size	auto
background-url	url	background url	n/a
border	string	css border format	none
border-bottom	string	css border format	n/a
border-left	string	css border format	n/a
border-radius	px	border radius	n/a
border-right	string	css border format	n/a
border-top	string	css border format	n/a
css-class	string	class name, added to the root HTML element created	n/a
direction	ltr / rtl	set the display order of direct children	ltr
full-width	string	make the section full-width	n/a
padding	px	supports up to 4 parameters	20px 0
padding-bottom	px	section bottom offset	n/a
padding-left	px	section left offset	n/a
padding-right	px	section right offset	n/a
padding-top	px	section top offset	n/a
text-align	string	css text-align	center

Limitations of background-images size and position on Outlook desktop : - If background-size is not specified, no-repeat will be ignored on Outlook. - If the specified size is a single attribute in percent, the height will be auto as in standard css. On outlook, the image will never overflow the element, and it will be shrinked instead of being cropped like on other clients.